
<template>
  <div class="dhl">
    <el-row class="tac" align="left">
      <el-col :span="12" style="margin-right: 200px;width: 200px;position: fixed;">
        <el-menu
            style="overflow: auto;height: 100vh; border-radius:0 64px 0 0;overflow-x:hidden"
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#4A76E0"
            text-color="#fff"
            active-text-color="#FFFFFF">
          <h3 align="center" style="color: aliceblue">

          </h3>
          <el-menu-item index="1">
            <!--           <i class="el-icon-menu"></i>-->
            <span slot="title">
             <img width="50px" height="50px"
                  src="https://cdn7.axureshop.com/demo2024/2031128/images…E%8B%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u179.jpg"
                  alt="" style=" border-radius: 50%;">
            </span>
            <div>小默外卖后台系统</div>
          </el-menu-item>

          <router-link to="homepage" tag="div">
            <el-menu-item index="4">
              <i class="el-icon-menu"></i>
              <span slot="title">首页概况</span>
            </el-menu-item>
          </router-link>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>客户管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="user" tag="div">
                <el-menu-item index="3-1">用户管理</el-menu-item>
              </router-link>
              <router-link to="shops" tag="div">
                <el-menu-item index="3-1">商家管理</el-menu-item>
              </router-link>
<!--              <el-menu-item index="3-2">打印机管理</el-menu-item>-->
              <router-link to="dbs" tag="div">
              <el-menu-item index="3-2">配送站管理</el-menu-item>
              </router-link>
              <router-link to="couriers" tag="div">
              <el-menu-item index="3-2">配送员管理</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="goods" tag="div">
                <el-menu-item index="9-1">商品列表</el-menu-item>
              </router-link>
              <router-link to="classification" tag="div">
                <el-menu-item index="9-2">商品分类</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>交易管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/order" tag="div">
                <el-menu-item index="4-1">订单管理</el-menu-item>
              </router-link>
              <router-link to="/orderrefund" tag="div">
                <el-menu-item index="4-2">退款管理</el-menu-item>
              </router-link>
              <el-menu-item index="4-2">团购管理</el-menu-item>
              <el-menu-item index="4-2">评价管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>活动管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">商家报名活动</el-menu-item>
              <el-menu-item index="5-2">商家自建活动</el-menu-item>
              <el-menu-item index="5-2">商家团购活动</el-menu-item>
              <el-menu-item index="5-2">平台优惠活动</el-menu-item>
              <el-menu-item index="5-2">平台推广活动</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item-group>
              <!--          <template slot="title">分组一</template>-->
              <el-menu-item index="6-1">财务列表</el-menu-item>
              <el-menu-item index="6-2">支付记录</el-menu-item>
              <el-menu-item index="6-3">体现管理</el-menu-item>
              <el-menu-item index="6-3">充值管理</el-menu-item>
              <el-menu-item index="6-3">订单分润</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>平台维护</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="7-1">
                <router-link tag="div" to="/pttz">平台通知</router-link>
              </el-menu-item>
              <el-menu-item index="7-2">
                <router-link tag="div" to="/ggtf">广告投放</router-link>
              </el-menu-item>
              <el-menu-item index="7-3">
                <router-link tag="div" to="/bzzx">帮助中心</router-link>
              </el-menu-item>
              <el-menu-item index="7-4">
                <router-link tag="div" to="/jbgl">举报管理</router-link>
              </el-menu-item>
              <el-menu-item index="7-5">
                <router-link tag="div" to="/yjfk">意见反馈</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="8-1">地区开放配置</el-menu-item>
              <el-menu-item index="8-2">
                <router-link tag="div" to="/peisong">配送相关配置</router-link>
              </el-menu-item>
              <el-menu-item index="8-3">
                <router-link tag="div" to="/dropdown">Dropdown配置</router-link>
              </el-menu-item>
              <el-menu-item index="8-4">
                <router-link tag="div" to="/mgc">敏感词管理</router-link>
              </el-menu-item>
<!--              <el-menu-item index="8-5">轮番图管理</el-menu-item>-->
              <el-menu-item index="8-6">
                <router-link tag="div" to="/zzhgl">子账号管理</router-link>
              </el-menu-item>
              <el-menu-item index="8-7">
                <router-link tag="div" to="/grsz">个人设置</router-link>
              </el-menu-item>
              <el-menu-item index="8-8">操作日志</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <!--     页面组件-->
      <el-container style="margin-left: 200px;height: 100%;">
        <el-main align="left" style="text-align: left;margin-top: 60px">
          <router-view/>
        </el-main>
        <el-header style=" position: fixed;width: 100%;padding: 0;margin: 0;">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                   style="background-color: #FFFFFF">
            <!--             <img width="50px" height="50px"  src="https://cdn7.axureshop.com/demo/1881228/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u408.jpg" alt="" style="margin-top: 15px;margin-left: 20px">小默外卖配送站调度系统-->
            <!--             <img width="20px" height="20px" style="margin-top: 30px;float: right" src="https://cdn7.axureshop.com/demo/1881228/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u1040.png"  alt="">-->
            <el-input placeholder="请输入内容"
                      style="width: 200px;float: left;margin-top: 25px;margin-left: 10px"></el-input>
            <el-submenu index="userData" style="margin-top: 15px;margin-left: 900px">
              <template slot="title" style="border: none">
                <img width="50px" height="50px"
                     src="https://spyx-h2310a.oss-cn-beijing.aliyuncs.com/2024/10/14/331936558e634a9481eeed2ae0dface9111.jpg"
                     alt="" style=" border-radius: 50%;">张三
              </template>
              <el-menu-item index="personalData" @click="grsz()">个人设置</el-menu-item>
              <el-menu-item index="changePassword" @click="">操作日志</el-menu-item>
              <el-menu-item index="logout" @click="logout()">退出系统</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-header>
      </el-container>
    </el-row>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.el-col {
  //background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.d1 {
  width: 150px;
  height: 40px;
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 30px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

body {
  overflow-x: hidden;
}
</style>

<script>
export default {
  data() {
    return {
      showDropdown: false,
      activeIndex: '1'
    }
  },
  methods: {
    grsz(){
      location.href='#/grsz';
    },
    logout(){
      location.href='#/';
    },
    beforeRouteEnter(to, from, next) {
      if (to.path === from.path) {
        return next(false);
      }
      next();
    },
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
